<template>
	<div class="content">
		<swiper :data-name="'swiper1'" :data-type="'1'">
			<div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div>
		</swiper>
		<swiper :data-name="'swiper2'" :data-type="'2'">
			<div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div>
		</swiper>
		<!-- <swiper :data-name="'swiper3'" :data-type="'3'" :data-img-arr="imgArr">
			<div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div>
		</swiper> -->
		<swiper :data-name="'swiper3'" :data-type="'5'">
			<div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div>
		</swiper>
		<swiper :data-name="'swiper5'" :data-type="'5'">
			<!-- <div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div> -->
			<div class="swiper-slide" v-for="element in imgArr">
				<div class="item">
					<div class="img">
						<img :src="element">
					</div>
					<!-- <img v-bind:src="element"> -->
					<div class="car-class m-tab-bg">A200Dynamic</div>
				</div>
			</div>
		</swiper>
		<swiper :data-name="'swiper6'" :data-type="'6'">
			<!-- <div class="swiper-slide" v-for="element in imgArr"><img v-bind:src="element"></div> -->
			<div class="swiper-slide" v-for="element in imgArr">
				<div class="item">
					<div class="img">
						<img :src="element">
					</div>
					<!-- <img v-bind:src="element"> -->
					<div>A200Dynamic</div>
					<div>MSRP ￥257,000</div>
				</div>
			</div>
		</swiper>
		<swiper id="swiper7" :data-name="'swiper7'" :data-type="'7'">
			<div class="swiper-slide car-item m-tab-bg"  v-for="car in carlist">			
				<div class="car-info">
					<div class="car-name btn-font-shadow">{{car.CarName}}</div>
					<div class="color-primary btn-font-shadow">{{car.MSRP | currency '￥' }}</div>
				</div>
			</div>
		</swiper>
		<swiper id="swiper8" :data-name="'swiper8'" :data-type="'8'">
			<div class="swiper-slide" v-for="item in term">			
				{{item}} years
			</div>
		</swiper>
	</div>
</template>
<style lang="sass" scoped>
@import "../../public/css/common.scss";
.swiper-container {
    width: 100%;
    margin-top:40px;
}
.swiper-slide{
	width: 60%;
    height: 8rem;
    background:#FFF;
}
.swiper-slide img{
	width: 100%;
	height:100%;
}
.case5{
	padding-top: 0.3rem;
    padding-bottom: 0.55rem;
    margin-top: 0;
    .swiper-slide{
        height: 8.3rem;
        border-radius: 5px;
        width: 11.25rem;
        .item{
        	width:100%;
        	height:100%;
        }
        .img{
        	height: torem(257px);
			border: 1px solid #757679;
			border-bottom: 0;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
        }
        img{
        	border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			width: 100%;
			height:100%;
        }
        .car-class{
			height:torem(75px);
			border:1px solid #191A1D;
			border-radius:0  0 torem(9px) torem(9px);
			color: rgb( 255, 255, 255 );
		}
    }
}
.case6 .swiper-slide{
	.item{
		width: torem(450px);
		left: torem(-106px);
		position: absolute;
    	top: 0;
    	background: black;
    	color:#fff;
	}
	.img{
		height: torem(257px);
		border: 1px solid #757679;
		border-bottom: 0;
	}
	img{
		width: 100%;
		height: 100%;
	    border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.car-class{
		height:torem(75px);
		border:1px solid #191A1D;
		border-radius:0  0 torem(9px) torem(9px);
		color: rgb( 255, 255, 255 );
	}
}
.case7{
  height: 5rem;
  white-space: nowrap;
  border-bottom: 1px #101012 solid;
  .swiper-slide{
    @include borderRaduis(0.25rem);
    border-top: 1px solid #757679;
    padding: 0.7rem 1.6rem 0;
    position: relative;
    min-width: torem(504px);
    margin-right: 0.3rem;
    display: inline-block;
    &.swiper-slide-active:before{
      content:'';
      position: absolute;
      right: 6px;
      top:6px;
      background: url(../../public/images/ico_ok.png)  0 0 / cover;
      width: 1.3rem;
      height:1.3rem;
    }
  }
}
.case8.swiper-container{
	height:3.5rem;
	width:5.5rem;
	color:blue;
	.swiper-slide{
		width: 100%;
		height:1.5rem;
		color: #00adef;
		&.swiper-slide-active:before{
			content:'';
			position: absolute;
			left: 0;
			background: url(../../public/images/ico_ok.png)  0 0 / cover;
			width: 1.3rem;
			height:1.3rem;
		}
	}
}
</style>
<script>
	export default{
		vuex: {
	      getters: {
			Lang:({Lang})=>Lang.lang
	      }
	    },
	    data(){
	    	return{
	    		imgArr:['http://i2.hexunimg.cn/2015-11-09/180426542.jpg',
	    		'http://img0.imgtn.bdimg.com/it/u=2101881030,1006187430&fm=21&gp=0.jpg',
	    		'http://a2.att.hudong.com/02/01/300236035351132274015404305_950.jpg',
	    		'http://img1.3lian.com/img2008/14/04/0210.jpg',
	    		'http://img2.3lian.com/img2007/24/03/018.jpg',
	    		'http://pic.58pic.com/58pic/12/01/44/03F58PICW5q.jpg',
	    		'http://img1.3lian.com/img2008/14/04/0210.jpg'],
	    		carlist:[{'CarName':'A 200 Dynamic','MSRP':254000},
	    		{'CarName':'A 200 Dynamic','MSRP':254000},
	    		{'CarName':'A 200 Dynamic','MSRP':254000},
	    		{'CarName':'A 200 Dynamic','MSRP':254000},
	    		{'CarName':'A 200 Dynamic','MSRP':254000}],
	    		term:[1,2,3,4,5,6,7,8,9,10,11,12]
	    	}
	    },
	    components:{
	    	'swiper':require("../common/swiper.vue")
	    }
	}
</script>